首页 > 代码库 > gulp入门

gulp入门

2024-08-11 04:07:16   219人阅读

入门

http://www.tuicool.com/articles/FJVNZf

1、全局安装

sudo npm install -g gulp

 

以下需要进入项目目录：

2、项目安装

如果项目需要其他nodejs其它包，请先创建package.json，只用gulp,可以直接使用下面命令

cnpm install --save-dev gulp

3、安装gulp组件

例如：

npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev

4、创建 gulpfile.js

// 引入 gulpvar gulp = require(‘gulp‘); // 引入组件var jshint = require(‘gulp-jshint‘);var sass = require(‘gulp-sass‘);var concat = require(‘gulp-concat‘);var uglify = require(‘gulp-uglify‘);var rename = require(‘gulp-rename‘);// 检查脚本gulp.task(‘lint‘, function() {    gulp.src(‘./js/*.js‘)        .pipe(jshint())        .pipe(jshint.reporter(‘default‘));});// 编译Sassgulp.task(‘sass‘, function() {    gulp.src(‘./scss/*.scss‘)        .pipe(sass())        .pipe(gulp.dest(‘./css‘));});// 合并，压缩文件gulp.task(‘scripts‘, function() {    gulp.src(‘./js/*.js‘)        .pipe(concat(‘all.js‘))        .pipe(gulp.dest(‘./dist‘))        .pipe(rename(‘all.min.js‘))        .pipe(uglify())        .pipe(gulp.dest(‘./dist‘));});// 默认任务gulp.task(‘default‘, function(){    gulp.run(‘lint‘, ‘sass‘, ‘scripts‘);    // 监听文件变化    gulp.watch(‘./js/*.js‘, function(){        gulp.run(‘lint‘, ‘sass‘, ‘scripts‘);    });});

5、命令行执行 gulp 即可

gulp default

6、其它

gulp只有五个方法： task ， run ， watch ， src ，和 dest 。

gulp本身不会处理，所有处理都需要第三方的组件

 

一些组件：

gulp-jshint 会检查js文件有没有报错或警告

gulp-htmlmin 压缩html，可以压缩页面javascript、css，去除页面空格、注释，删除多余属性等操作

gulp-uglify 压缩javascript文件，减小文件大小 注意还有合并，改名等，参见上面

gulp-clean-css 压缩css文件，减小文件大小，并给引用url添加版本号避免缓存

gulp入门


联系
我们