Gulp前端自动化工具

前端日常工作是什么?拿到PSD图,然后开切!首先我们建立一个app的文件夹,然后在app下,我们建立img文件夹,接下来是 css …… 项目终于搞定之后,我们要使用在线压缩工具把样式表进行合并压缩,把所有的大尺寸图片重新导入Ps,保存为 web 格式,然后调整质量 。。。。。。

你就没想过偷懒的办法么?你就是这么把时间耗在没有意义的简单机械的活儿中么?

或者,很多前端都已经开始使用Grunt这样的工具了,自动压缩、自动打包、文件合并、Less,Sass 编译、文件监控、本地文件服务器调试环境。不错,基于Grunt另外推出了非常多的 generate ,类似 angularJS , Ember , Backbone, webapp, bootstrap 等等等等,但是 Grunt 的学习曲线也是非常陡的。虽然能够通过一些通用脚手架来搭建前端工程作为基础架构。一旦需要修改配置,则是异常痛苦。

gulp 的功效和 Grunt 也是异曲同工、插件也是异常丰富。

通过 Grunt 与 gulp 的对比。我个人还是比较喜欢 gulp 的一些操作模式。不管是从词法、编程语义的理解程度来说。gulp 都是优于 Grunt 。官网的介绍谈到了文件流、以及处理速度。因为没有现成的案例,所以不能妄自评论。下面就浅谈一下两者之间的使用细节。

这里引用?http://markgoodyear.com/2014/01/getting-started-with-gulp/ 中的例子:

Grunt

sass: {
  dist: {
    options: {
      style: 'expanded'
    },
    files: {
      'dist/assets/css/main.css': 'src/styles/main.scss',
    }
  }
},

autoprefixer: {
  dist: {
    options: {
      browsers: [
        'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
      ]
    },
    src: 'dist/assets/css/main.css',
    dest: 'dist/assets/css/main.css'
  }
},

grunt.registerTask('styles', ['sass', 'autoprefixer']);

Gulp

gulp.task('sass', function() {
  return gulp.src('src/styles/main.scss')
    .pipe(sass({ style: 'compressed' }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/assets/css'))
});

不管从代码还是从阅读性上来说,Gulp 不是更加优越一些嘛?从代码的输入和输出,以及事件的操作顺序一幕了然,完全不用在复杂的GruntFile中间去找各种各样的变量表达式。妈妈再也不用担心我的学习!

那么我们来一个简单的Case吧。

首先确保你安装了NodeJS。

然后运行

npm install gulp -g

安装 gulp 到你的系统环境中,创建好您的文件目录,在根目录中建立文件:package.json

package.json


{
  "name": "project-demo",
  "autho": "可乐加糖",
  "email": "33370733@qq.com",
  "devDependencies": {
    "del": "^1.1.1",
    "gulp": "^3.8.10",
    "gulp-autoprefixer": "^2.0.0",
    "gulp-concat": "^2.4.3",
    "gulp-imagemin": "^2.1.0",
    "gulp-jshint": "^1.9.0",
    "gulp-livereload": "^3.3.0",
    "gulp-minify-css": "^0.3.12",
    "gulp-notify": "^2.1.0",
    "gulp-rename": "^1.2.0",
    "gulp-sass": "^1.3.1",
    "gulp-uglify": "^1.0.2"
  },
  "engines": {
    "node": ">=0.10.0"
  }
}

声明好你需要使用的插件包之后,npm install 开始安装所有的插件包。之后在文件夹根目录建立 gulpfile.js文件。

这里我写了一个基础代码(未完成版,已编译Scss,Js,Css 文件合并压缩,语法检查)提供给大家能够有一个直观的影响。稍后我会做成一个通用的部署脚本,添加所有的注释方便大家学习。并且把整个文件发布到Github之中作为前端工程模版。


var gulp = require('gulp'),
	jshint = require('gulp-jshint'),
	concat = require('gulp-concat'),
	rename = require('gulp-rename'),
	uglify = require('gulp-uglify'),
	imagemin = require('gulp-imagemin'),
	autoprefixer = require('gulp-autoprefixer'),
	sass = require('gulp-sass'),
	minifyCSS = require('gulp-minify-css'),

	del = require('del');

//设置目录
var paths = {
	scripts: 'app/js/',
	images: 'app/imgs/',
	css: 'app/css/',
	scss: 'app/scss/',
	build: 'build/'
};
//清理操作
gulp.task('clean', function(cb) {
	del([paths.build], cb)
});
//JS语法检查
gulp.task('jshint', function() {
	gulp.src(paths.scripts + "*.js")
		.pipe(jshint())
		.pipe(jshint.reporter('default'));
});
//编译SCSS
gulp.task('sass', function() {
	gulp.src(paths.scss + "*.scss")
		.pipe(sass())
		//自动添加CSS3前缀
		.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
		.pipe(gulp.dest(paths.css));
});
//合并CSS
gulp.task('minify-css',['sass'], function() {
	gulp.src(paths.css + '*.css')
		.pipe(concat('all.css'))
		.pipe(minifyCSS({
			keepBreaks: true
		}))
		.pipe(gulp.dest(paths.build + "css"))
});
//合并与脚本压缩
gulp.task('minify', function() {
	gulp.src(paths.scripts + "*.js")
		.pipe(jshint())
		.pipe(concat('all.js'))
		.pipe(gulp.dest(paths.scripts))
		.pipe(rename('all.min.js'))
		.pipe(uglify())
		.pipe(gulp.dest(paths.build + "js"))
});
//文件监控
gulp.task('name',['tasks'], function() {
    
});



gulp.task('default', ['clean'], function() {
	console.log("请进行任务配置");
});

gulp.task('build',['clean'], function() {
    gulp.run('jshint','minify-css','minify')
});

参考资料:

  • http://www.html-js.com/article/Task-runs-Gulp-for-task-Gulp-based-tutorial
  • https://www.npmjs.com/search?q=gulp&page=1
  • http://segmentfault.com/blog/laopopo/1190000000372547?page=1

发表评论

电子邮件地址不会被公开。 必填项已用*标注