gulp 入门学习

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

gulp安装

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

    $ npm install gulp

    $ npm install gulp --save-dev

新建文件目录

gulp 入门学习

  • 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 入门指南

进阶

你可能感兴趣的:(学习)