常用项目结构和gulp配置
来源:互联网 发布:tipso.min.js 编辑:程序博客网 时间:2024/06/05 18:49
项目结构:
gulpfile.js:
var gulp = require('gulp'), browserSync = require('browser-sync').create(),//网页自动刷新 rename = require('gulp-rename'),//重命名 cssmin = require('gulp-cssmin'),//压缩css iconfont = require('gulp-iconfont'),//svg转ttf字体 iconfontCss = require('gulp-iconfont-css'),//svg转ttf字体 less = require('gulp-less'),//编译less autoprefixer = require('gulp-autoprefixer');//添加css3前缀var paths = { HTML:'mockup/*.html', LESS:'less/**/*.less', JS:'js/*.js', source: ['less/private/*.less'], svg: 'svg/*.svg', classPrev: 'icon', path: 'less/component/_font.less', targetPath: '../less/component/font.less', fontName: 'micon', fontPath: 'font/', watchcss: [ 'less/*.less', 'less/**/*.less' ], watchMockup: [ '' ]};gulp.task('runless', function() { return gulp.src(paths.source) .pipe(less()) .pipe(autoprefixer()) .pipe(gulp.dest('css/main/')) .pipe(browserSync.stream())});gulp.task('cssmin',['runless'],function() { return gulp.src('css/main/*.css') .pipe(cssmin()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('css/dist/')) .pipe(browserSync.stream()) });gulp.task("jswatch", function() { return gulp.src(paths.JS) .pipe(browserSync.stream());})gulp.task("html", function() { return gulp.src(paths.HTML) .pipe(browserSync.stream());})gulp.task('iconfont', function() { gulp.src([paths.svg]) .pipe(iconfontCss({ cssClass : paths.classPrev, path: paths.path, targetPath: paths.targetPath, fontName: paths.fontName, fontPath: paths.fontPath })) .pipe(iconfont({ fontName: paths.fontName, normalize: true, fontHeight: 1001, formats: ['ttf'] })) .pipe(gulp.dest(paths.fontPath));});// gulp.task('watch', function() {// return gulp.watch(paths.watchcss, ['runless', 'cssmin']);// });gulp.task("serve", ["cssmin", "jswatch", "html"], function() { browserSync.init({ server : "./" }); gulp.watch(paths.LESS, ["cssmin"]); gulp.watch(paths.JS, ["js-watch"]); gulp.watch(paths.HTML, ["html"]); gulp.watch(paths.HTML).on("change", function() { browserSync.reload; });});
package.json:
{ "name": "js", "version": "1.0.0", "description": "", "main": "", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server --inline --content-base --env=dev --publicPath=dev ." }, "author": "", "license": "ISC", "dependencies": { "history": "^4.2.0" }, "devDependencies": { "browser-sync": "^2.18.8", "copy-webpack-plugin": "^3.0.1", "css-loader": "^0.23.1", "gulp": "^3.9.1", "gulp-autoprefixer": "^3.1.1", "gulp-connect": "^5.0.0", "gulp-cssmin": "^0.1.7", "gulp-iconfont": "^8.0.1", "gulp-iconfont-css": "^2.1.0", "gulp-less": "^3.1.0", "gulp-rename": "^1.2.2", "http-server": "^0.8.5", "webpack": "^1.13.1", "webpack-dev-server": "^1.16.3" }}
0 0
- 常用项目结构和gulp配置
- gulp常用配置
- gulp常用插件和工具
- gulp项目中的package配置说明
- gulp---gulp常用插件
- gulp常用
- webstrom配置使用之git和gulp
- gulp 配置
- gulp配置
- 配置gulp
- gulp常用插件-gulp-autoprefixer
- gulp常用插件-gulp-uglify
- gulp常用插件-gulp-imagemin
- Dynamic项目常用的分层结构和框架规范
- 简单使用gulp四个API和常用模块
- 精通 gulp 常用插件的功能和用法
- visual studio 解决方案项目结构部署和配置
- visual studio 解决方案项目结构部署和配置
- 如何快速的写出一个Vue的icon组件?
- Java 的虚拟机内存分配详解
- 38. Count and Say
- 软件测试
- 【转】【《Effective C#》提炼总结】提高Unity中C#代码质量的21条准则
- 常用项目结构和gulp配置
- 一个登录Demo初识MVP
- 关于国内目前保险行业的IT核心系统的一些感受
- iOS SDAutoLayout布局体验(2)
- 类中的静态方法不能直接调用动态方法
- C#图片上传,并做安全检测
- ubuntu系统下安装rz/sz命令及使用说明
- Spring 开启Annotation <context:annotation-config> 和 <context:component-scan>诠释及区别
- the zipalign tool was not found in the sdk