前端构建工具Gulp使用总结
2016-04-23 16:42
731 查看
1.安装准备
1.1 Node.js安装
在安装Gulp之前首先的安装Node.js,安装教程详见Node.js 安装配置
1.2 npm安装
在安装node的时候会自动安装npm模块管理器,详见npm模块管理器win+r输入cmd打开命令终端
node -v查看所安装的node的版本号
npm -v查看所安装的npm的版本号
用win系统终端命令进入项目根目录
d: 进入d盘
dir d盘下文件列表
cd www 进入www文件夹,直至根目录
cd .. 退回上一级文件夹
2. 安装Gulp
2.1 全局安装
在全局安装gulpnpm install gulp -g
2.2 新建package.json文件
npm init 配置package.json文件2.3 本地安装
进入项目根目录再安装一遍npm install gulp --save-dev
3. 安装插件
我们将要使用Gulp插件来完成以下任务:less的编译(gulp-less)
压缩js代码(gulp-uglify)
压缩css(gulp-minify-css)
压缩html(gulp-minify-html)
压缩图片(gulp-imagemin)
图片缓存(gulp-cache)
文件重命名(gulp-rename)
更改提醒(gulp-notify)
清除文件(del)
安装以上插件
npm install gulp-less gulp-uglify gulp-minify-css gulp-minify-html gulp-imagemin gulp-cache gulp-rename gulp-notify del --save-dev
4. 新建gulpfile.js文件
说明:gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件//导入工具包 require('node_modules里对应模块') var gulp = require('gulp'); //本地安装gulp所用到的地方 var less = require('gulp-less'); // 获取 gulp-less 模块(用于编译Less) var jsmin = require('gulp-uglify'); //JS文件压缩 var cssmin = require('gulp-minify-css'); //css文件压缩 var htmlmin = require('gulp-minify-html'); //html文件压缩 var cache = require('gulp-cache'); //图片缓存 var imgmin = require('gulp-imagemin'); //图片压缩 var notify = require('gulp-notify'); //更动通知 var rename = require('gulp-rename'); //重命名 var del = require('del'); //var sass = require('gulp-ruby-sass'); //编译SASS // var jshint = require('gulp-jshint'); //js代码检查 // var contact = require('gulp-contact'); //合并js或css文件等 //gulp.task(name[, deps], fn) 定义任务 name:任务名称 deps:依赖任务名称 fn:回调函数 //gulp.src(globs[, options]) 执行任务处理的文件 globs:处理的文件路径(字符串或者字符串数组) //gulp.dest(path[, options]) 处理完后文件生成路径 //gulp.watch(glob[, opts], tasks) 监视文件,并且可以在文件发生改动时候做一些事情。 //定义一个less任务(自定义任务名称) // 编译Less ,在命令行项目目录下使用 gulp less 启动此任务 // gulp.task('less', function () { // gulp.src('docs/*/less/*.less') //该任务针对的文件 // .pipe(less()) //该任务调用的模块 // .pipe(gulp.dest('dist/css')) //将会在dist/css下生成对应的css文件 // .pipe(notify({ message: 'less task complete' })); // }); //css文件压缩,在命令行项目目录下使用 gulp cssmin 启动此任务 gulp.task('cssmin', function () { gulp.src('docs/*/css/*.css') .pipe(cssmin({ advanced: false,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)] compatibility: 'ie7',//保留ie7及以下兼容写法 类型:String 默认:''or'*' [启用兼容模式; 'ie7':IE7兼容模式,'ie8':IE8兼容模式,'*':IE9+兼容模式] keepBreaks: false//类型:Boolean 默认:false [是否保留换行] })) .pipe(rename({ suffix: '.min' })) //对压缩后的文件重命名 .pipe(gulp.dest('dist')) .pipe(notify({ message: 'cssmin task complete' })); }); // js文件压缩 ,在命令行项目目录下使用 gulp jsmin 启动此任务 gulp.task('jsmin', function() { gulp.src('docs/**/js/*.js') // 1. 找到文件 .pipe(jsmin()) // 2. 压缩文件 .pipe(rename({extname:'.min.js'})) // 3.对压缩文件重命名 .pipe(gulp.dest('dist')) // 4. 输出压缩后的文件 .pipe(notify({ message: 'jsmin task complete' })); }); //图片压缩,在命令行项目目录下使用 gulp imgmin 启动此任务 gulp.task('imgmin', function() { gulp.src('docs/*/img/**/*.{png,jpg,gif,ico}') .pipe(cache(imgmin({ optimizationLevel: 5,//类型:Number 默认:3 取值范围:0-7(优化等级) progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片 interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染 multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化 }))) .pipe(gulp.dest('dist')) .pipe(notify({ message: 'imagemin task complete' })); }); //html文件压缩,在命令行项目目录下使用 gulp htmlmin 启动此任务 gulp.task('htmlmin', function () { gulp.src('docs/*/*.html') // 要压缩的html文件 .pipe(htmlmin()) //压缩 .pipe(gulp.dest('dist')) .pipe(notify({ message: 'htmlmin task complete' })); }); //字体文件复制 gulp.task('fonts',function(){ gulp.src('docs/*/fonts') .pipe(gulp.dest('dist')) .pipe(notify({message: 'fonts task complete'})); }) // js代码检查 // gulp.task('jshint', function() { // gulp.src('docs/js/*.js') // .pipe(jshint()) // // .pipe(jshint.reporter('default')); //默认在命令行里输出结果 // .pipe(jshint.reporter('gulp-jshint-html-reporter', {filename:'jshint-report.html'})); //输出结果到自定义的html文件 // }); //合并js或css文件等 // gulp.task('scripts', function() { // gulp.src('./js/*.js') // .pipe(concat('all.js')) // .pipe(gulp.dest('./dist')) // .pipe(rename('all.min.js')) // .pipe(uglify()) // .pipe(gulp.dest('./dist')); // }); // // 编译SASS // gulp.task('sass', function(){ // // // // }) // // //在任务执行前,最好先清除之前生成的文件: gulp.task('clean', function() { return del(['dist']); //删除发布环境文件 }); // 默认任务,在命令行项目目录下使用 gulp 启动此任务 gulp.task('default',['clean'],function(){ //在默认任务执行前,先执行清除任务 gulp.start('cssmin', 'jsmin', 'imgmin', 'htmlmin'); }); //监听文件变化,在命令行项目目录下使用 gulp watch启动此任务,监听的文件有变化就自动执行 gulp.task('watch',function(){ //监听css gulp.watch('docs/*/css/*.css',['cssmin']); //监听js gulp.watch('docs/*/js/*.js',['jsmin']); //监听img gulp.watch('docs/*/img/*/*.{png,jpg,gif,ico}',['imgmin']); //监听HTML gulp.watch('docs/*/*.html',['htmlmin']); });
5. 运行Gulp
通过终端命令行进入项目根目录gulp default或
default(说明:命令提示符执行gulp 任务名称)
如有不明之处,还请参阅gulp详细入门教程
相关文章推荐
- js 时间和时间对比
- 222. Count Complete Tree Nodes
- 使用editplus编写HTML页面为什么设置了UTF-8仍然中文乱码
- 不完全node实践教程-第三发
- html的特殊字符
- javascript系列学习----对象相关概念理解
- 不完全node实践教程-第二发
- react.js table组件【可以直接使用】
- css3折叠效果
- 不完全node实践教程-第一发
- 《CSS3实战》笔记--色彩模式和不透明度
- js日期工具
- js第一蛋
- js操作cookie实现记住密码功能
- js复杂数据格式提交
- scope 对象在 AngularJS 中充当数据模型的作用,也就是一般 MVC 框架中 Model 得角色.但又不完全与通常意义上的数据模型一样,因为 $scope 并不处理和操作数据,它只是建立了
- javascript 作用域链认识
- javascript断点调试心得分享
- AngularJs + Bootstrap
- JSP中静态包含和动态包含的区别?