gulp是基于Node.js的前端构建工具。因此首先须要安装nodejs,安装nodejs。css
完成nodejs安装以后,须要使用npm安装gulp。html
先安装全局gulp前端
npm install -g gulp
而后在项目根目录下安装本地gulp。node
此时项目根目录下会多出下面这个文件夹 node_modulesnpm
好的,如今gulp已经安装完成了,可是gulp自己不提供js压缩合并等功能,须要使用gulp的相关插件。目前只须要完成js压缩合并和css文件压缩的功能,先安装相应的插件:gulp
1.css压缩 gulp-minify-csssass
2.js压缩 gulp-uglify前端构建
3.js合并 gulp-concat 工具
因为压缩以前须要对js代码进行代码检测,压缩完成以后须要加上min的后缀,咱们还须要安装另外两个插件:ui
4.重命名 gulp-rename
5.js代码检测 gulp-jshint (或gulp-jslint)
(更多插件能够查看 http://gulpjs.com/plugins/ )
在项目根目录下执行如下命令:
npm install gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-jshint --save-dev
安装好的插件会出如今上面提到的node_modules文件夹中。
ok,如今可使用gulp了,在项目根目录下建立gulpfile.js文件。
在gulpfile.js中添加如下代码
var gulp = require('gulp'), minifycss = require('gulp-minify-css'), concat = require('gulp-concat'), uglify = require('gulp-uglify'), rename = require('gulp-rename'), jshint=require('gulp-jshint'); //语法检查 gulp.task('jshint', function () { return gulp.src('js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); }); //压缩css gulp.task('minifycss', function() { return gulp.src('css/*.css') //须要操做的文件 .pipe(rename({suffix: '.min'})) //rename压缩后的文件名 .pipe(minifycss()) //执行压缩 .pipe(gulp.dest('Css')); //输出文件夹 }); //压缩,合并 js gulp.task('minifyjs', function() { return gulp.src('js/*.js') //须要操做的文件 .pipe(concat('main.js')) //合并全部js到main.js .pipe(gulp.dest('js')) //输出到文件夹 .pipe(rename({suffix: '.min'})) //rename压缩后的文件名 .pipe(uglify()) //压缩 .pipe(gulp.dest('Js')); //输出 }); //默认命令,在cmd中输入gulp后,执行的就是这个任务(压缩js须要在检查js以后操做) gulp.task('default',['jshint'],function() { gulp.start('minifycss','minifyjs'); });
上述代码中的相关方法能够查看 gulp API docs
在文件根目录下执行gulp命令:
(若是Js文件有问题时,会出现相应的error提示,按照提示的错误信息修改便可)
bingo,如今能够在css文件夹中看到压缩好的css文件,在js中能够看到合并压缩好的main.min.js 。任务完成,只须要将html中css,js引用的路径修改为新的路径便可。
npm install gulp-sass --save-dev
'use strict'; var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { gulp.src('./sass/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./css')); }); gulp.task('sass:watch', function () { gulp.watch('./sass/**/*.scss', ['sass']); });