前端构建工具之gulp的安装和配置
在选择构建工具时，看到更多人推荐gulp，从此入了gulp的坑～
一、安装node环境
百度谷歌一下就有了，在终端中分别输入 node -v 和 npm -v，若显示node和npm的版本号则说明node环境装好了。
二、安装gulp
linux下安装全局环境：
sudo npm install -g gulp
或cd进入项目目录下安装gulp到项目本地：
npm install gulp --save-dev
--save-dev的意思是将安装的gulp版本信息写入package.json,更新devDependencies值，以表明项目需要依赖gulp；在项目迁移时，执行npm install即可安装项目环境。
三、安装依赖文件
- 检查javascript（gulp-jshint）
- 编译sass/less文件（gulp-sass / gulp-less）
- sass/less混入库（node-bourbon / lesshat）
- 压缩css文件（gulp-minify-css）
- 合并文件（gulp-concat）
- 压缩js文件（gulp-uglify）
- 重命名文件（gulp-rename）
- ...
举个栗子：
npm install gulp-jshint gulp-sass gulp-concat node-bourbon --save-dev
四、新建gulpfile.js文件
gulp只有五个方法：task、run、watch、src、和dest。gulpfile文件书写可以参照下面的栗子：
1 // 引入 gulp 2 var gulp = require('gulp'); 3 4 // 引入组件 5 var sass = require('gulp-sass'); 6 var minifycss = require('gulp-minify-css'); 7 var rename = require('gulp-rename'); 8 var concat = require('gulp-concat'); 9 var jshint = require('gulp-jshint'); 10 var uglify = require('gulp-uglify'); 11 12 // 编译Sass 13 gulp.task('sass', function () { 14 gulp.src('./css/*.scss') 15 .pipe(sass({ 16 includePaths: require('node-bourbon').includePaths 17 })) 18 .pipe(concat('style.min.css')) 19 .pipe(minifycss()) 20 .pipe(gulp.dest('./css')); 21 }); 22 23 // 语法检查 24 gulp.task('jshint', function() { 25 return gulp.src('./js/*.js') 26 .pipe(jshint()) 27 .pipe(jshint.reporter('default')); 28 }); 29 30 // 合并文件之后压缩代码 31 gulp.task('minify', function(){ 32 gulp.src('./js/*.js') 33 .pipe(concat('all.js')) 34 .pipe(gulp.dest('./js')) 35 .pipe(uglify()) 36 .pipe(rename('all.min.js')) 37 .pipe(gulp.dest('./dist')) 38 }); 39 40 // 默认任务 41 gulp.task('default', function () { 42 gulp.run('sass'); 43 gulp.run('jshint'); 44 gulp.run('minify'); 45 gulp.watch('./css/*.scss', function () { 46 gulp.run('sass'); 47 }); 48 });
五、执行gulp
在终端执行下面的命令执行所有的任务
gulp
或者执行单个任务
gulp minify
OK,大功告成～
参考:
