标签：.json var class install ack type script 没有 pack
在这里我们将用gulp来实现前端开发自动化,考虑到我们永远屹立的万里长城我们使用cnpm,同时本文内容以本人另一篇文章(http://www.cnblogs.com/izgl/p/6433105.html)为前提,请自行参考
在工程目录下打开cmd
1.cnpm install gulp -g --save-dev
2.cnpm install gulp --save-dev
2.gulp -v 检测gulp有没有安装好
3.到package.json中观察 "devDependencies": {"gulp": "^3.9.1"} 这个代码有,代表配置成功
4. 到code下 建立一个gulpfile.js 文件
5. 再建立两个文件 分别命名为src 和 distribution
6 到src文件夹下 建立 index.html
7. 将src文件夹下的 index.html 复制到 distribution
环境的搭建需要安装以下功能插件以及安装命令行代码
1.压缩css
cnpm i gulp-cssnano --save-v
2.压缩js
cnpm i gulp-cancat --save-v
3.压缩html
cnpm i gulp-htmlmin --save-v
4.混淆js
cnpm i gulp-uglify --save-v
5.浏览器同步测试
//先安装
cnpm install -g browser-sync
cnpm i gulp-uglify --save-v
//到src文件夹下 建立 index.html
6.实现浏览器自动同步需要如下js代码(位于gulpfile.js)
//将index.htmlcopy到distribution
var gulp = require(‘gulp‘);
gulp.task(‘copy‘, function() {
// 将你的默认的任务代码放在这
gulp.src(‘src/index.html‘)
.pipe(gulp.dest(‘distribution‘))
.pipe(browserSync.reload({
stream:true
}));
gulp.src(‘src/css/*.css‘)
.pipe(gulp.dest(‘distribution/css‘))//把src/css里面css文件copy到distribution/css
});
var gulp = require(‘gulp‘);
gulp.task(‘copyCss‘, function() {
// 将你的默认的任务代码放在这
gulp.src(‘src/css/*.css‘)
.pipe(gulp.dest(‘distribution/css‘))//把src/css里面css文件copy到distribution/css
.pipe(browserSync.reload({
stream:true
}));
});
//less转换成css 并且压缩
var less = require(‘gulp-less‘);
var cssnano = require(‘gulp-cssnano‘);
gulp.task(‘less‘,function () {
return gulp.src(‘src/style/*.less‘)
.pipe(less()) //less转换成css
.pipe(cssnano()) //压缩css
.pipe(gulp.dest(‘distribution/css‘)) //把css文件copy到distribution/css
.pipe(gulp.dest(‘src/css‘))//把css文件copy到src/css
.pipe(browserSync.reload({
stream:true
}));
});
//压缩js并且混淆js
var concat = require(‘gulp-concat‘);
var uglify = require(‘gulp-uglify‘);
gulp.task(‘concat‘, function() {
return gulp.src(‘src/js/*.js‘)
.pipe(concat(‘all.js‘)) //压缩到目标文件
.pipe(uglify())//混淆js
.pipe(gulp.dest(‘distribution/js‘)) //把文件copy到distribution/js
.pipe(browserSync.reload({
stream:true
}))
});
//压缩HTML
var htmlmin = require(‘gulp-htmlmin‘);
gulp.task(‘minify‘, function() {
return gulp.src(‘src/*.html‘)
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(htmlmin({preserveLineBreaks: true}))
.pipe(htmlmin({processConditionalComments: true}))
.pipe(htmlmin({removeAttributeQuotes: true}))
.pipe(htmlmin({removeComments: true}))
.pipe(htmlmin({removeEmptyElements: true}))
.pipe(htmlmin({removeScriptTypeAttributes: true}))
.pipe(htmlmin({removeStyleLinkTypeAttributes: true}))
.pipe(htmlmin({removeAttributeQuotes: true}))
.pipe(gulp.dest(‘distribution‘))
.pipe(browserSync.reload({
stream:true
}))
});
//自动监听文件内容变化，实现开发流自动化
// gulp.task(‘auto‘,function () {
// gulp.watch(‘src/css/*.css‘,[‘less‘]);
// gulp.watch(‘src/js/*.js‘,[‘concat‘]);
// gulp.watch(‘src/style/*.less‘,[‘less‘]);
// gulp.watch(‘src/index.html‘,[‘minify‘]);
// });
// 代替上面“自动监听文件内容变化，实现开发流自动化”
var browserSync = require(‘browser-sync‘).create();
// Static server
gulp.task(‘serve‘, function() {
browserSync.init({
server: {
baseDir: "./distribution"
}
});
gulp.watch(‘src/css/*.css‘,[‘less‘]);
gulp.watch(‘src/js/*.js‘,[‘concat‘]);
gulp.watch(‘src/style/*.less‘,[‘less‘]);
gulp.watch(‘src/css/*.css‘,[‘copyCss‘]);
gulp.watch(‘src/index.html‘,[‘minify‘]);
});
7.cmd运行gulp.serve
标签：.json var class install ack type script 没有 pack
原文地址：http://www.cnblogs.com/izgl/p/6653067.html
