gulp基础使用及进阶

提示：路径中不允许出现中文，否则scss编译会出错，大概。

 按照惯例，先检查一下Node.js、npm（cnpm）、gulp的版本号

  

  1.新建package.json  

    我们可以通过手动新建这个配置文件  也可以通过执行 npm init

     package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件

  

  2.通过更改package.json来安装各种需要的插件，而我的方案则是

{
  "name": "xueweijie",
  "version": "1.0.0",
  "description": "this is a test",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "xueweijie&gulp",
  "license": "ISC",
  "devDependencies": {  //开发环境   也就是说打包之后还需要用到的插件
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",   //为css自动增加前缀
    "gulp-cache": "^0.4.5",    //清除缓存  
    "gulp-connect": "^5.0.0"   //浏览器自动刷新
  },
  "dependencies": {    //生成环境   
    "gulp-htmlmin": "^3.0.0",   //编译html
    "gulp-imagemin": "^3.3.0",   //编译images
    "gulp-minify-css": "^1.2.4",  //编译css
    "gulp-concat": "^2.6.0",    //按顺序打包js（让多个js生成一个js）
    "gulp-uglify": "^2.1.2",    //编译js
    "gulp-file-include": "^0.13.7",   //模板复用
    "gulp-sass": "^3.1.0"       //编译sass
  }
}

以gulp-cache举例  你也可以通过自己 npm install gulp-cache --save-dev

以gulp-htmlmin举例  你也可以通过 npm install gulp-htmlmin --save

而dev就是让它们在生成环境还是开发环境的区别

注意： 去掉注释！

3.通过 npm install  安装node_modules  （太长就不放了）

　

4.在目录中新建一个gulpfile.js

  

5.开始配置gulpfile.js

var gulp = require('gulp');

// 浏览器自动刷新 
var connect = require('gulp-connect');
gulp.task('connect', function() {
    connect.server({
        livereload: true
    });
});

// 编译html
var htmlmin = require('gulp-htmlmin');
var    fileinclude = require('gulp-file-include');
var options = {
  removeComments: true, //清除HTML注释
  collapseWhitespace: true, //压缩HTML
  collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
  removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
  removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
  removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
  minifyJS: true, //压缩页面JS
  minifyCSS: true //压缩页面CSS
};
gulp.task('html', function () {
  return gulp.src('./src/html/**/*.html')  //生产路径
      .pipe(htmlmin(options))   //压缩html
    .pipe(fileinclude({     //模板复用
        prefix: '@@',
        basepath: '@file'
    }))
      .pipe(gulp.dest('dist/html'))   //打包路径
    .pipe(connect.reload());
});

// 编译css
var cssmin = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');  //自动增加前缀
var sass = require('gulp-sass');
gulp.task('css', function () {
    return gulp.src('src/css/**/*.scss')  //生成路径
            .pipe(autoprefixer({
            browsers: ['last 2 versions', 'Android >= 4.0'],
            cascade: true, //是否美化属性值 默认：true 像这样：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            remove:true //是否去掉不必要的前缀 默认：true 
        }))
        .pipe(sass())
        .pipe(cssmin({
          advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
          compatibility: '*',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
          keepBreaks: true,//类型：Boolean 默认：false [是否保留换行]
          keepSpecialComments: '*'
          //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
        }))
        .pipe(gulp.dest('dist/css'))
            .pipe(connect.reload());
});

// 编译js
var uglify = require('gulp-uglify');
gulp.task('js', function () {
    return gulp.src('src/js/**/*.js')  //生产路径
        .pipe(uglify({
            mangle: {except: ['require' ,'exports' ,'module' ,'$']},
          compress: true,//类型：Boolean 默认：true 是否完全压缩
          preserveComments: 'all' //保留所有注释
        }))
        .pipe(gulp.dest('dist/js'))   //打包路径
            .pipe(connect.reload());
});

// 编译 images
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
gulp.task('image', function () {
    return gulp.src('src/images/*.{png,jpg,gif,ico}')  //生成路径
        .pipe(cache(imagemin({
          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/images'));  //打包路径
});

// 编译 copy
var concat = require('gulp-concat');
gulp.task('copy',  function() {   //静态资源
  return gulp.src('src/lib/*.js')   
      .pipe(concat('all.js'))        //打包成all.js
    .pipe(gulp.dest('dist/lib'))
});

//编译 iconfont
gulp.task('iconFont',  function() {
  return gulp.src('src/iconfont/*')
    .pipe(gulp.dest('dist/iconfont'))
});

//实时监听
gulp.task('watch', function () {
    
  gulp.watch(['./src/html/**/*.html'], ['html']);

  gulp.watch(['./src/css/**/*.scss'], ['css']);

  gulp.watch(['./src/js/**/*.js'], ['js']);

});

gulp.task('default', ['connect', 'watch','html','css','js','image','copy','iconFont']);

6.建立src目录，开始搭建目录结构

  

 

   首先将公共部分的css跟js引入页面，lib为静态资源，通过顺序用上述插件打包成一个js，再以采用一个页面一个css，一个页面一个js的方法进行编写

  模板复用这一块通过新建一个后缀名为inc的文件，再在后缀名为html里引入即可，路径要把控好

7.打包上线 gulp 打包  gulp watch  实时监听

 

dist即为打包之后的项目

从两者之间的大小即可看到效果， 由于我做的image这一块优化不深，推荐一个深度优化图片的网站（免费！！） https://tinypng.com/  这样项目的大小会变得更小一点。

通过gulp watch既可以实时监听，在src里改变了什么，浏览器就可以直接看到。