Role: compress css, js, img, merge files, change the name, compile sass, copy
Steps for usage:
1. Installation node environment, the next step, the next step, the C drive is mounted;
2. In your root directory in the address bar enter cmd carriage return;
3. Does the detection node and npm success:
node -v displays the version number, proof of the success of the node
npm -v displays the version number, npm proved successful: Tutorial https://www.runoob.com/nodejs/nodejs-npm.html
npm package resource official website: https: //www.npmjs.com/
4. Installation gulp:
Method a: install dependent plug mounting gulp: a separate mounting;
Global Installation: npm install gulp -g
Local installation: npm install gulp --save -dev
Install plug-ins:
npm install --save -dev gulp-sass
npm install --save -dev gulp-cssmin
...... (what you need to plug the time)
Method two: one-time installation of plug-dependent and gulp:
The package.json package into the root directory:
Write command: npm install (usually there are no red err on the success)
Instruction detection: gulp -v, prove successful
5. Use gulp, task execution: the first to write task, perform the task
Write task: create gulpfile.js file in the root directory;
Open a command line to perform tasks: gulp Task Name
6. There are many common tasks :( ...)
1. // compile sass
var sass = require('gulp-sass');
gulp.task('sass',function(){
return gulp.src('src/lib/style.scss')
.pipe(sass())
ital (gulp.dest ( 'dist / lib'));
});
// assign a task 2: compressed css file
var cssmin=require('gulp-cssmin');
gulp.task('cssmin',function(){
return gulp.src('src/lib/css.css')
.pipe(cssmin())
ital (gulp.dest ( 'dist / css'));
});
// 3. Double naming
var rename=require('gulp-rename');
gulp.task('rename',function(){
return gulp.src('src/lib/css.css')
.pipe(cssmin())
.pipe(rename('css.min.css'))
ital (gulp.dest ( 'dist / css'));
});
// 4 and rename the compressed js: first converted into es5 recompression
var uglify=require('gulp-uglify');
gulp.task('uglify',function(){
return gulp.src('src/js/common.js')
.pipe(uglify())
.pipe(rename('common.min.js'))
ital (gulp.dest ( 'dist / js'));
});
// 5. Merge files
var concat=require('gulp-concat');
gulp.task('concat',function(){
return gulp.src(['dist/css/aa.css','dist/css/bb.css'])
.pipe(concat('all.css'))
ital (gulp.dest ( 'dist / css'));
});
// 6. Compress Pictures
var = imagemin require ( 'gulp imagemin');
gulp.task('imgmin',function(){
return gulp.src('src/img/*')
.pipe (imagemin ())
.pipe(gulp.dest('dist/img'));
});
// 7. Es6 will turn into es5
Installation babel:
Global installation babel: npm install -g babel-cli
Local installation: npm install --save-dev babel-preset-es2015 babel-cli
.Babelrc files are copied to the root directory, write command began to turn es5
// es6 turn into es5 instructions:
Save the file path after the babel es6 -o turn successful path
babel src/js/es6.js -o dist/js/es5.js