这里是gulp入门的一些操作,实现了编译sass文件、压缩、合并、添加版本号等基本功能。
友情提示,如果npm出现无法下载可以安装 cnpm。在安装完Nodejs 后
npm install cnpm -g --registry=https://registry.npm.taobao.org
完成后可
cnpm -v
查看安装结果
1.安装Nodejs
2.安装全局gulp
npm install --global gulp-cli
3.进入项目目录(之后的操作全是在此目录下进行)
cd desktop/myprogram
4.初始化package.json
npm init
5.安装项目gulp
npm install --save-dev gulp
6.安装插件
npm install gulp-htmlmin gulp-imagemin imagemin-pngcrush gulp-jshint jshint gulp-uglify gulp-notify gulp-useref gulp-load-plugins gulp-clean-css gulp-sass gulp-if gulp-users gulp-rev gulp-rev-collector —save-dev
7.新建gulpfile.js
var gulp = require('gulp');
gulp.task('default', function() {
// place code for your default task here
});
8.测试
在终端输入命令
gulp
9.附上index.html(压缩css、js部分) 、package.json 和 gulpfile.js
index.html
<link rel="shortcut icon" href="images/favicon.ico">
<!-- build:css lib/main.css -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<!-- endbuild -->
<!-- build:js lib/main.js -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/route.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<!-- endbuild -->
package.json
"devDependencies": {
"del": "^2.2.0",
"gulp": "^3.9.1",
"gulp-clean-css": "^2.0.8",
"gulp-concat": "^2.6.0",
"gulp-htmlmin": "^2.0.0",
"gulp-if": "^2.0.1",
"gulp-imagemin": "^3.0.1",
"gulp-jshint": "^2.0.1",
"gulp-load-plugins": "^1.2.4",
"gulp-notify": "^2.2.0",
"gulp-rev": "^7.0.0",
"gulp-rev-collector": "^1.0.3",
"gulp-sass": "^2.3.1",
"gulp-sequence": "^0.4.5",
"gulp-uglify": "^1.5.3",
"gulp-useref": "^3.1.0",
"imagemin-pngcrush": "^5.0.0",
"jshint": "^2.9.2"
}
gulpfile.js
'use strict';
var gulp = require('gulp'),
$ = require("gulp-load-plugins")(),
sass = require("gulp-sass"),
rev = require("gulp-rev"),
del = require('del');
gulp.task('default', function() {
gulp.run('styles', 'jshint');
gulp.watch('src/styles/*.scss', ['styles']);
});
gulp.task('build', $.sequence('cpfiles', 'useref', 'cphtml', 'revfile',
'revhtml', 'delfiles', 'img','htmlmin'));
gulp.task('htmlmin', function() {
return gulp.src(['dist/*/*.html', 'dist/*.html'])
.pipe($.htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('dist/'))
.pipe($.notify({ message: 'htmlmin task done' }));
});
gulp.task('delfiles', function(){
del([
'dist/js',
'dist/css',
'dist/styles',
'dist/lib/index.html',
'dist/lib/rev-manifest.json'
]);
})
gulp.task('revhtml', function () {
return gulp.src(['dist/lib/rev-manifest.json', 'dist/lib/index.html'])
.pipe($.revCollector())
.pipe(gulp.dest('dist/'))
.pipe($.notify({ message: 'revhtml task done' }));
});
gulp.task('revfile', function(){
return gulp.src(['dist/lib/*.css', 'dist/lib/*.js'])
.pipe($.rev())
.pipe(gulp.dest('dist/lib/'))
.pipe(rev.manifest({
path: 'rev-manifest.json',
merge: true
}))
.pipe(gulp.dest("dist/lib/"))
.pipe($.notify({ message: 'revfile task done' }));
});
gulp.task('cphtml', function(){
return gulp.src('dist/*.html')
.pipe(gulp.dest('dist/lib/'))
.pipe($.notify({ message: 'copyhtml task done' }));
})
gulp.task('useref', function() {
return gulp.src('dist/*.html')
.pipe($.useref())
.pipe($.if('*.js', $.uglify()))
.pipe($.if('*.css', $.cleanCss({compatibility: 'ie8'})))
.pipe(gulp.dest('dist/'))
.pipe($.notify({ message: 'useref task done' }));
});
gulp.task('cpfiles', ['styles'], function(){
return gulp.src(['src/*/*','src/*'])
.pipe(gulp.dest('dist/'))
.pipe($.notify({ message: 'copyfiles task done' }));
})
gulp.task('img', function() {
return gulp.src('dist/images/*.*')
.pipe($.imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [$.imagemin()]
}))
.pipe(gulp.dest('dist/images/'))
.pipe($.notify({ message: 'img task done' }));
});
gulp.task('styles', function(){
return gulp.src('src/styles/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('src/css'))
.pipe($.notify({ message: 'sass task done' }));
})
gulp.task('jshint', function() {
return gulp.src(['src/js/main.js','src/js/route.js'])
.pipe($.jshint())
.pipe($.jshint.reporter('default'))
.pipe($.notify({ message: 'jshint task done' }));
});
gulp.task('clean', function(){
del([
'dist/'
]);
})
文件结构,上层为 desktop/myprogram/