-save 和 - save-dev 可以省掉你手动修改 package.json 文件的步骤。
- npm install module-name -save
自动把模块和版本号添加到 dependencies 部分
- npm install module-name -save-dev
自动把模块和版本号添加到 devdependencies 部分 gulp 命令你仅仅需要知道的 5 个 gulp 命令
gulp.task(name[, deps], fn) 定义任务 name:任务名称 deps:依赖任务名称 fn:回调函数
gulp.run(tasks...):尽可能多的并行运行多个 task
gulp.watch(glob, fn):当 glob 内容发生改变时,执行 fn
gulp.src(glob):置需要处理的文件的路径,可以是多个文件以数组的形式,也可以是正则
gulp.dest(path[, options]):设置生成文件的路径 glob:可以是一个直接的文件路径。他的含义是模式匹配。 gulp 将要处理的文件通过管道(pipe())API 导向相关插件。通过插件执行文件的处理任务。
- gulp.task('default',
- function() {...
- });
gulp.task 这个 API 用来创建任务,在命令行下可以输入 $ gulp [default],(中括号表示可选)来执行上面的任务。
gulp 官方 API 文档:https://github.com/gulpjs/gulp/blob/master/docs/API.md
gulp 插件大全:http://gulpjs.com/plugins/ 开始构建项目在项目根目录下新建一个 gulpfile.js 文件,粘贴如下代码:
- //在项目根目录引入gulp和uglify插件
- var gulp = require('gulp');
- var uglify = require('gulp-uglify');
- gulp.task('compress',function(){
- return gulp.src('script/*.js')
- .pipe(uglify())
- .pipe(gulp.dest('dist'));
- });
注:gulpfile.js 文件名不可更改。 项目需要用到 uglify 和 rename 插件,执行以下命令安装:
- npm install --save-dev gulp-uglify
- npm install --save-dev gulp-rename
以我的为例,进入 gulpfile.js 所在目录:
- cd /Users/trigkit4/gulp-test
然后输入:
- var gulp = require('gulp');
- var uglify = require('gulp-uglify');
- var rename = require('gulp-rename');
- gulp.task('compress',function(){
- return gulp.src('script/*.js')
- .pipe(uglify())
- .pipe(rename('jquery.ui.min.js'))
- .pipe(gulp.dest('dist'));
- });
该命令会安装 package.json 下的全部依赖,如下图所示:
完整的 gulpfile.js
- // 载入外挂
- var gulp = require('gulp'),
- sass = require('gulp-ruby-sass'),
- autoprefixer = require('gulp-autoprefixer'),
- minifyCSS = require('gulp-minify-css'),
- jshint = require('gulp-jshint'),
- uglify = require('gulp-uglify'),
- imagemin = require('gulp-imagemin'),
- rename = require('gulp-rename'),
- clean = require('gulp-clean'),
- concat = require('gulp-concat'),
- notify = require('gulp-notify'),
- cache = require('gulp-cache'),
- livereload = require('gulp-livereload');
- // 样式
- gulp.task('styles',
- function() {
- return gulp.src('src/styles/main.scss').pipe(sass({
- style: 'expanded',
- })).pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')).pipe(gulp.dest('dist/styles')).pipe(rename({
- suffix: '.min'
- })).pipe(minifycss()).pipe(gulp.dest('dist/styles')).pipe(notify({
- message: 'Styles task complete'
- }));
- });
- // 脚本
- gulp.task('scripts',
- function() {
- return gulp.src('src/scripts/**/*.js').pipe(jshint('.jshintrc')).pipe(jshint.reporter('default')).pipe(concat('main.js')).pipe(gulp.dest('dist/scripts')).pipe(rename({
- suffix: '.min'
- })).pipe(uglify()).pipe(gulp.dest('dist/scripts')).pipe(notify({
- message: 'Scripts task complete'
- }));
- });
- // 图片
- gulp.task('images',
- function() {
- return gulp.src('src/images/**/*').pipe(cache(imagemin({
- optimizationLevel: 3,
- progressive: true,
- interlaced: true
- }))).pipe(gulp.dest('dist/images')).pipe(notify({
- message: 'Images task complete'
- }));
- });
- // 清理
- gulp.task('clean',
- function() {
- return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {
- read: false
- }).pipe(clean());
- });
- // 预设任务
- gulp.task('default', ['clean'],
- function() {
- gulp.start('styles', 'scripts', 'images');
- });
- // 看守
- gulp.task('watch',
- function() {
- // 看守所有.scss档
- gulp.watch('src/styles/**/*.scss', ['styles']);
- // 看守所有.js档
- gulp.watch('src/scripts/**/*.js', ['scripts']);
- // 看守所有图片档
- gulp.watch('src/images/**/*', ['images']);
- // 建立即时重整伺服器
- var server = livereload();
- // 看守所有位在 dist/ 目录下的档案,一旦有更动,便进行重整
- gulp.watch(['dist/**']).on('change',
- function(file) {
- server.changed(file.path);
- });
- });
注:pipe() 是 stream 模块里传递数据流的一个方法,第一个参数为插件方法,插件会接收从上游流下的文件,进行处理加工后,再往下流。
- gulp.task('任务名称', function () {
- return gulp.src('文件路径')
- .pipe(...)
- .pipe(...)
- // 直到任务的最后一步
- .pipe(...);
- });
gulp 插件 gulp-gh-pages:使用 gulp 来把 markdown 生成 html 文档并上传到 git pages 上 https://github.com/shinnn/gulp-gh-pages
- var gulp = require('gulp');
- var ghPages = require('gulp-gh-pages');
- gulp.task('deploy', function() {
- return gulp.src('./dist/**/*')
- .pipe(ghPages());
- });
gulp-jade 插件:将 jade 编译成 html 文件 gulp-less 插件:将 less 编译成 css 文件
- var less = require('gulp-less');
- var path = require('path');
- gulp.task('less', function () {
- return gulp.src('./less/**/*.less')
- .pipe(less({
- paths: [ path.join(__dirname, 'less', 'includes') ]
- }))
- .pipe(gulp.dest('./public/css'));
- });
- gulp-live-server 插件:方便的,轻量级的服务器
- var gulp = require('gulp');
- var gls = require('gulp-live-server');
- gulp.task('serve', function() {
- //1. serve with default settings
- var server = gls.static(); //equals to gls.static('public', 3000);
- server.start();
- //2. serve at custom port
- var server = gls.static('dist', 8888);
- server.start();
- //3. serve multi folders
- var server = gls.static(['dist', '.tmp']);
- server.start();
- //use gulp.watch to trigger server actions(notify, start or stop)
- gulp.watch(['static/**/*.css', 'static/**/*.html'], function (file) {
- server.notify.apply(server, [file]);
- });
- });
gulp-livereload,可以实时保存刷新,那样就不用按 F5 和切换界面了 gulp-load-plugins:在你的 package.json 文件中自动加载任意的 gulp 插件
- $ npm install --save-dev gulp-load-plugins
例如一个给定的 package.json 文件如下:
- {
- "dependencies": {
- "gulp-jshint": "*",
- "gulp-concat": "*"
- }
- }
在 gulpfile.js 中添加如下代码:
- var gulp = require('gulp');
- var gulpLoadPlugins = require('gulp-load-plugins');
- var plugins = gulpLoadPlugins();
- plugins.jshint = require('gulp-jshint');
- plugins.concat = require('gulp-concat');
gulp-babel:gulp 的 babel 插件,
- $ npm install --save-dev gulp-babel babel-preset-es2015
使用方法:
- const gulp = require('gulp');
- const babel = require('gulp-babel');
- gulp.task('default', () => {
- return gulp.src('src/app.js')
- .pipe(babel({
- presets: ['es2015']
- }))
- .pipe(gulp.dest('dist'));
- });
官方 github: https://github.com/gulpjs/gulp
来源: http://www.phperz.com/article/17/0406/265586.html