1.装置gulp
gulp是基于Node.js的前端构建东西。所以起首须要装置nodejs,装置nodejs。
完成nodejs装置以后,须要运用npm装置gulp。
先装置全局gulp
npm install -g gulp
然后在项目根目录下装置当地gulp。
此时项目根目录下会多出下面这个文件夹 node_modules
好的,如今gulp已装置完成了,然则gulp自身不供应js紧缩兼并等功用,须要运用gulp的相干插件。现在只须要完成js紧缩兼并和css文件紧缩的功用,先装置响应的插件:
1.css紧缩 gulp-minify-css
2.js紧缩 gulp-uglify
3.js兼并 gulp-concat
因为紧缩之前须要对js代码举行代码检测,紧缩完成以后须要加上min的后缀,我们还须要装置别的两个插件:
4.重命名 gulp-rename
5.js代码检测 gulp-jshint (或gulp-jslint)
(更多插件能够检察 http://gulpjs.com/plugins/ )
在项目根目录下实行以下敕令:
npm install gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-jshint –save-dev
装置好的插件会出如今上面提到的node_modules文件夹中。
2.运用gulp
ok,如今能够运用gulp了,在项目根目录下建立gulpfile.js文件。
在gulpfile.js中增添以下代码
var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
jshint=require('gulp-jshint');
//语法搜检
gulp.task('jshint', function () {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
//紧缩css
gulp.task('minifycss', function() {
return gulp.src('css/*.css') //须要操纵的文件
.pipe(rename({suffix: '.min'})) //rename紧缩后的文件名
.pipe(minifycss()) //实行紧缩
.pipe(gulp.dest('Css')); //输出文件夹
});
//紧缩,兼并 js
gulp.task('minifyjs', function() {
return gulp.src('js/*.js') //须要操纵的文件
.pipe(concat('main.js')) //兼并一切js到main.js
.pipe(gulp.dest('js')) //输出到文件夹
.pipe(rename({suffix: '.min'})) //rename紧缩后的文件名
.pipe(uglify()) //紧缩
.pipe(gulp.dest('Js')); //输出
});
//默许敕令,在cmd中输入gulp后,实行的就是这个使命(紧缩js须要在搜检js以后操纵)
gulp.task('default',['jshint'],function() {
gulp.start('minifycss','minifyjs');
});
上述代码中的相干要领能够检察 gulp API docs
在文件根目录下实行gulp敕令:
(假如Js文件有题目时,会涌现响应的error提醒,根据提醒的错误信息修正即可)
bingo,如今能够在css文件夹中看到紧缩好的css文件,在js中能够看到兼并紧缩好的main.min.js 。使命完成,只须要将html中css,js援用的途径修正成新的途径即可。
增添Sass
npm install gulp-sass --save-dev
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});