gulp 入门学习

想学习一下怎么使用gulp，找了几篇博客，一开始就放大招，js压缩，css压缩，sass编译，less编译，拼接等等全堆积上来。 对于我这种之前没接触过任务自动管理工具的人来说，感觉像看电影快进一样，只要中途有不理解的就要断篇。

gulp安装

• 安装gulp 如果参数-g 表示全局安装

  $ npm install gulp

  $ npm install gulp --save-dev

新建文件目录

• dist: 压缩后的线上代码
  
• src: 生产环境的本地源代码
  
• gulpfile.js: gulp的配置文件，在根目录中

开始构建项目

现有目录：

└── src/
 └── js/
 └── a.js

任务：

1. 找到src目录下的js文件下的js文件
   
2. 压缩这些js文件
   
3. 压缩后的代码输出到dist/js/目录下

开始任务：

1. 因为现在需要压缩js文件，所以需要安装gulp-uglify模块
   
2. npm install gulp-uglify
   
3. 在根目录下新建并编辑gulpfile.js

gulpfile.js代码如下

//获取gulp
var gulp = require('gulp');
var uglify = require('gulp-uglify');

//压缩js文件
gulp.task('script', function() {
    //1.找到文件 *是通配符，表示找到所有的js文件
    gulp.src('src/js/*.js')
    //2.压缩文件
    .pipe(uglify())
    //3.另存压缩后文件
    .pipe(gulp.dest('dist/js'))
});
 

执行压缩任务：

在命令行输入 gulp script

在dist/js/下就能看压缩后的文件了。

实时更新压缩文件

//获取gulp
var gulp = require('gulp');
var uglify = require('gulp-uglify');

//压缩js文件
gulp.task('script', function() {
    //1.找到文件 *是通配符，表示找到所有的js文件
    gulp.src('src/js/*.js')
    //2.压缩文件
    .pipe(uglify())
    //3.另存压缩后文件
    .pipe(gulp.dest('dist/js'))
});

//在命令行使用gulp启动此任务
gulp.task('watchjs', function() {
    //监听文件修改，当文件修改则执行script任务
    gulp.watch('src/js/*.js', ['script']);
});

//在命令行 输入gulp  等于输入gulp default
//在此处会同时执行script任务和watchjs任务
gulp.task('default', ["script", "watchjs"]);

其他模块的使用也差不多类似。

gulp模块

• 编译Sass (gulp-ruby-sass)
  
• Autoprefixer (gulp-autoprefixer)
  
• 缩小化(minify)CSS (gulp-minify-css)
  
• JSHint (gulp-jshint)
  
• 拼接 (gulp-concat)
  
• 丑化(Uglify) (gulp-uglify)
  
• 图片压缩 (gulp-imagemin)
  
• 即时重整(LiveReload) (gulp-livereload)
  
• 清理档案 (gulp-clean)
  
• 图片快取，只有更改过得图片会进行压缩 (gulp-cache)
  
• 更动通知 (gulp-notify)

参考链接

Gulp 入门指南

进阶