前端构建工具之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文件书写可以参照下面的栗子:

 // 引入 gulp
var gulp = require('gulp'); // 引入组件
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify'); // 编译Sass
gulp.task('sass', function () {
gulp.src('./css/*.scss')
.pipe(sass({
includePaths: require('node-bourbon').includePaths
}))
.pipe(concat('style.min.css'))
.pipe(minifycss())
.pipe(gulp.dest('./css'));
}); // 语法检查
gulp.task('jshint', function() {
return gulp.src('./js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
}); // 合并文件之后压缩代码
gulp.task('minify', function(){
gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./js'))
.pipe(uglify())
.pipe(rename('all.min.js'))
.pipe(gulp.dest('./dist'))
}); // 默认任务
gulp.task('default', function () {
gulp.run('sass');
gulp.run('jshint');
gulp.run('minify');
gulp.watch('./css/*.scss', function () {
gulp.run('sass');
});
});

五、执行gulp

在终端执行下面的命令执行所有的任务

gulp

或者执行单个任务

gulp minify

OK,大功告成~

参考:

上一篇:【2017下集美大学软工1412班_助教博客】团队作业9——事后分析(Beta版本)成绩公示


下一篇:【2017下集美大学软工1412班_助教博客】团队作业4——Alpha冲刺日志公示