gulp打包是前端代码压缩的常用工具。
1、安装node
2、安装npm
以上测试安装是否成功输入（node -v或者npm -v）
3,安装gulp 执行npm install gulp -g
测试安装是否成功输入（gulp -v）
4、新建package.json文件到项目文件根目录
因为package.json是基于node.js项目必不可少的配置文件，用于存放项目根目录的普通json文件重点内容
方法是进入项目文件中执行npm init来新建package.json文件
5.本地安装gulp
全局安装gulp是为了执行gulp任务，本地安装gulp是为了调用gulp插件的功能进入你的项目文件路径中，执行npm install gulp --save-dev
6.安装gulp-sass插件
在项目文件路径后 ，执行npm install gulp-sass --save-dev
7.新建gulpfile.js
gulpfile.js是gulp的配置文件，放于根目录中。
示例内容：导入你需要的工具包 require('node_module里对应的模块')
var gulp =require('gulp'),
sass=require('gulp-sass');
//sass任务
gulp.task('sass',function(){
return gulp.src('src/css/test.scss') //获取该任务需要的文件
.pipe(sass()) //该任务调用的模块
.pipe(gulp.dest('src/css')); //将在src/css文件夹中生产test.css
})
//默认任务
gulp.task('default',['sass','watchl']);
//监听文件
gulp.task('watchl',function(){
return gulp.watch('src/css/test.scss',['sass']);
//监听src/css/test.scss文件，修改时自动执行sass任务
})
注释：我们要告诉他要执行那些任务首先要知道自己项目需要那些任务
例：
1.检查js
2.编译sass(less)文件
3.合并js
4.压缩并重命名合并后的js
5.自动刷新页面
npm install gulp-jshint --save-dev jshint 安装失败问题: 解决方案: npm install --save-dev jshint
gulp-jshint npm install gulp-sass --save-dev 编译sass文件
npm install gulp-concat --save-dev 合并js
npm install gulp-uglify --save-dev 通过UglifyJS来压缩JS文件
. npm install gulp-rename --save-dev 重命名文件的插件，当要把一个文件存储为不同版本时可以使用。比如在需要一个style.css同时你有需要一个style.min.css
npm install gulp-autoprefixer --save-dev 使用Autoprefixer来补全浏览器兼容的css。
gulp-minify-css 压缩css,最终是调用clean-css 参考：http://www.ydcss.com/archives/41
gulp-gzip 压缩zip
gulp-imagemin 压缩png/jpg/git/svg 格式图片文件
gulp-util gulp常用的工具库 在安装gulp时默认已经安装，可以直接使用
gulp-clean 清理档案
3.2 gulp只有五个方法:task run watch src dest
文件配置如下也就是gulpfile.js
//引入gulp，项目文件中安装的gulp的引入方式 var gulp =require('gulp'); //引入组件 var jshint = require("gulp-jshint"); var gutil = require("gulp-util"); var sass= require("gulp-sass"); var concat = require("gulp-concat"); var uglify = require("gulp-uglify"); var rename = require("gulp-rename"); var path = require("path"); //var webpack = require("webpack"); //var WebpackDevServer = require("webpack-dev-server"); //var webpackConfig = require("./webpack.config.js");//也可以是某个特定目录下(比如:config)的文件、 var del = require("del"); //你也许会想要在编译文件之前删除一些文件 gulp.task('clean', function(cb) { return del(['build/**/*'], cb); }); //检查脚本 gulp.task('lint',function () { gulp.src('./src/javascript/**/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); }); //编译sass //sass 任务会编译scss/目录下的scss文件，并把编译完成的css文件保存到/css目录中 gulp.task('sass',function () { gulp.src("./src/scss/**/*.scss") .pipe(sass({outputStyle: 'compact'})) .pipe(gulp.dest("./build/css")); }); //合并，压缩文件 //scipts 任务会合并js 目录下的所有js文件并输出到dist目录中，然后gulp会重命名。压缩合并的文件，也输出到dist/目录 gulp.task('scripts',function () { gulp.src('./src/javascript/**/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('./dest')) .pipe(rename("all.min.js")) .pipe(uglify()) .pipe(gulp.dest("./build")) }); //这时，我们创建了一个基于其他任务的default任务。 //使用.run()方法关联和运行我们上面定义的任务，使用.watch() 方法去坚挺制定目录的文件变化,当有文件变化时，会运行回调定义的其他任务。 gulp.task('default',function(){ //将你的默认的任务代码放在这里 gulp.run('lint','sass','scripts'); //监听文件变化 gulp.watch("",function () { gulp.run('lint','sass','scripts'); }); });
实验例子
执行gulp clean 会把build下的所有文件删除掉举一个例子
删除build文件夹下的oo下的所有文件，但是保留oo里的mm文件
var gulp =require('gulp');
var del = require("del"); //你也许会想要在编译文件之前删除一些文件
gulp.task('clean:mobile', function(cb) {
return del(['build/oo/**/*','!build/oo/mm'] , cb); });//检查脚本
jshint 的安装命令:
ncmp install jshint gulp-jshint --save-devvar jshint = require("gulp-jshint");
gulp.task('lint',function () { gulp.src('./src/javascript/**/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); });
根据行数找出错误就行
gulp-sass编译sass文件
var sass=require('gulp-sass');
gulp.task('sass',function(){
gulp.src('./src/scss/**/*.scss')
.pipe(sass({outputStyle:'compact'}))
.pipe(gulp.dest("./build/css"))
})
就可以编译scss文件了
npm install gulp-jshint --save-dev jshint 安装失败问题: 解决方案: npm install --save-dev jshint gulp-jshint
npm install gulp-sass --save-dev 编译sass文件
npm install gulp-concat --save-dev 合并js
npm install gulp-uglify --save-dev 通过UglifyJS来压缩JS文件.
npm install gulp-rename --save-dev 重命名文件的插件，当要把一个文件存储为不同版本时可以使用。比如在需要一个style.css同时你有需要一个style.min.css npm install gulp-autoprefixer --save-dev 使用Autoprefixer来补全浏览器兼容的css。 gulp-minify-css 压缩css,最终是调用clean-css 参考：http://www.ydcss.com/archives/41 gulp-gzip 压缩zip gulp-imagemin 压缩png/jpg/git/svg 格式图片文件 gulp-util gulp常用的工具库 在安装gulp时默认已经安装，可以直接使用 gulp-clean 清理档案